<template>
	<view>
		<van-tabbar :active="props.active" @change="onChange" placeholder="true" :fixed="true" :z-index="99999"
			active-color="#2775e6">
			<van-tabbar-item v-for="(item, index) in props.list" :key="index" link-type="switchTab"
				:url="`/${item.pagePath}`" :icon="item.iconPath"
				:active-icon="item.selectedIconPath">{{item.text}}</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const props = defineProps({
		list: {
			type: Array,
			default: []
		},
		active: {
			type: Number,
			default: 0
		}
	});

	onLoad(() => {
		console.log(props.active, 123);
	});

	const onChange = (index) => {
		console.log('切换到第', index, '项');
	};
</script>

<style>
	/* 底部导航栏整体样式 */
	van-tabbar {
		background-color: #ffffff;
		height: 100px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	/* 底部导航栏单个item样式 */
	van-tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	/* 底部导航栏图标样式 */
	van-tabbar-item .van-tabbar-item__icon {
		width: 44px;
		height: 44px;
		margin-bottom: 4px;
	}

	/* 底部导航栏文字样式 */
	van-tabbar-item .van-tabbar-item__text {
		font-size: 24px;
		color: #666666;
		line-height: 1.4;
	}

	/* 底部导航栏选中状态的样式 */
	van-tabbar-item.van-tabbar-item--active .van-tabbar-item__text {
		color: #2775e6;
	}

	/* 底部导航栏选中状态的图标样式 */
	van-tabbar-item.van-tabbar-item--active .van-tabbar-item__icon {
		color: #2775e6 !important;
		/* 确保选中状态图标颜色为蓝色 */
	}
</style>